<!-- 本月目标 -->
<template>
  <el-card :header="title">
    <template #extra>
      <more-icon @command="onCommand" />
    </template>
    <div style="min-height: 560px; overflow: auto">
      <div class="accumulatedSitesBg">
        <div class="padding30">
          <el-input placeholder="请输入昵称/手机号"
                    v-model="phone"
                    class="input-with-select">
            <el-button slot="append"
                       @click="search()"
                       icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <div v-if="userInfo">
        <div v-if="userInfoList.length >= 2"
             style="overflow-y: auto; height: 160px">
          <div class="padding17"
               v-for="(item, index) in userInfoList"
               :key="index">
            <div class="flex-between">
              <div class="flex-start-center m-bottom10">
                <img style="
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    margin-right: 7px;
                  "
                     :src="item?.avatar"
                     alt="" />
                <div>
                  <div class="m-bottom10"
                       style="color: rgb(153, 153, 153)">昵称：{{ item?.nickname }}</div>
                  <div style="color: rgb(153, 153, 153)">手机号：{{ item?.phone ? item?.phone : '-----' }}</div>
                </div>
              </div>
              <el-radio @input="selectRadio"
                        v-model="radio"
                        :label="index"><span></span></el-radio>
            </div>
          </div>
        </div>
        <div class="flex-column"
             style="margin-top: 84px; margin-bottom: 17px">
          <img :src="userInfo?.avatar"
               alt="" />

          <div class="m-algin20 fontSize18"
               style="font-weight: 700"></div>
          <div class="m-bottom10"
               style="color: rgb(153, 153, 153)">昵称：{{ userInfo?.nickname }}</div>
          <div style="color: rgb(153, 153, 153)">手机号：{{ userInfo?.phone ? userInfo?.phone : '-----' }}</div>
        </div>
        <!-- 四宫格 -->
        <div class="fourPalaceGrid">
          <div class="singlePalaceGrid flex-column">
            <div style="
                color: rgb(94, 120, 248);
                font-weight: 700;
                font-size: 24px;
              ">
              {{ userInfo.balance }}
            </div>
            <div class="m-top10"> 当前余额(元) </div>
          </div>
          <div class="singlePalaceGrid flex-column">
            <div style="font-weight: 700; font-size: 24px">
              {{ userInfo.coupon_num }}
            </div>
            <div class="m-top10"> 我的卡券 </div>
          </div>
          <div class="singlePalaceGrid flex-column">
            <div style="font-weight: 700; font-size: 24px">
              {{
                userInfo.surplus_integral
                  ? userInfo.surplus_integral
                  : userInfo.integral
              }}
            </div>
            <div class="m-top10"> 当前积分 </div>
          </div>
          <div class="singlePalaceGrid flex-column">
            <div style="color: red; font-weight: 700; font-size: 24px">
              {{ userInfo.package_num }}
            </div>
            <div class="m-top10"> 套餐卡数量 </div>
          </div>
        </div>
      </div>
      <div v-else>
        <!-- 自定义提示文字 -->
        <ele-empty class="flex-column"
                   style="height: 337px"
                   text="哎呀, 还没有数据~" />
      </div>
    </div>
  </el-card>
</template>

<script>
import { pageUsers, userinfo } from '@/api/user/user';
// import VueCountUp from 'vue-countup-v2';
export default {
  //   const emit = defineEmits(['command']);
  name: 'analysis',
  props: {
    title: String,
    // 余额充值
    balanceRechargeBol: Boolean,
    packageSettlementBol: Boolean,
    consumptionSettlementBol: Boolean
  },
  components: {},
  data () {
    return {
      countUpOptions: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        decimalPlaces: 2,
        prefix: '',
        suffix: ''
      },
      siteNumObject: '',
      // 当前版本
      currentVersion: '',
      //   最新版本
      latestVersion: '',
      //   标记
      sign: '',
      //   当前标记信息
      signMsg: '',
      latestVersionBoolen: true,
      //   到期时间
      endDate: '',
      userInfoList: [],
      phone: '',
      loading: false,
      radio: 0,
      form: {
        // 取平台的appid
        appid: '',
        // 取平台的域名
        realmName: '',

        softwareIdentifying: 'wjyk_massage',
        updateFlag: '1'
      },
      params: {
        softwareIdentifying: 'wjyk_massage',
        page: 1,
        limit: 10
      },
      //   当前总数
      total: null,
      //
      //   更新列表
      upDataList: [],
      //   日记更新列表
      logList: [],
      pcGzhUrl: '',
      versionUrl: '',
      userInfo: null
    };
  },
  activated () {
    this.siteNumFn();
    // this.init();
  },
  methods: {
    async userinfoFn () {
      const res = await userinfo({
        uid: this.userInfo.id
      });

      console.log(res);
      if (res.code == 0) {
        this.userInfo = res.data;
      } else {
        this.$message.error(res.message);
      }
    },
    selectRadio (e) {
      this.userInfo = this.userInfoList[e];
      console.log(this.userInfo);
      localStorage.setItem('userInfo', JSON.stringify(this.userInfo));

      this.$emit('userInfo', this.userInfo);
    },
    selectUserRadio () { },
    async search () {
      if (this.$store.state.user.info.role_type != 1) {
        if (this.phone) {
          const res = await pageUsers({
            name: this.phone
          });

          console.log(res);
          this.userInfoList = res.list;
          if (res.list.length == 1) {
            this.userInfo = res.list[0];
            console.log(this.userInfo);
            localStorage.setItem('userInfo', JSON.stringify(this.userInfo));

            this.$emit('userInfo', this.userInfo);
          } else {
            if (!this.userInfo) {
              if (res.list.length) {
                this.radio = 0;
                this.userInfo = res.list[0];
                localStorage.setItem('userInfo', JSON.stringify(this.userInfo));
                console.log(this.userInfo);
                this.$emit('userInfo', this.userInfo);
              } else {
                this.$message.success('没有查询到该用户');
                this.userInfo = null;
              }
            } else {
              if (res.list.length) {
                const userIndex = this.userInfoList.findIndex((item) => {
                  return item.id == this.userInfo.id;
                });
                console.log(userIndex + '----');
                if (userIndex != -1) {
                  this.radio = userIndex;
                  this.userInfo = res.list[userIndex];
                } else {
                  this.radio = 0;
                  this.userInfo = res.list[0];
                }
              } else {
                this.$message.success('没有查询到该用户');
                this.userInfo = null;
              }
            }
          }
        } else {
          this.$message.success('请输入电话号码或者昵称');
          this.userInfo = null;
        }
      } else {
        this.$message.success('管理员无法操作收银台');
        this.userInfo = null;
      }
    },
    /* 提交 */
    async siteNumFn () { },
    onCommand (command) {
      console.log(command);
    },
    async init () { },
    upLoadZip () {
      window.open(this.versionUrl, '_self');
    }
  },
  watch: {
    balanceRechargeBol (visible) {
      this.$nextTick(async () => {
        if (visible) {
          this.userinfoFn();
          this.search();
          //   查询是哪个用户并且进行勾选
          this.selectUserRadio();
          console.log('balanceRechargeBol', visible);
        }
      });
    },
    packageSettlementBol (visible) {
      this.$nextTick(async () => {
        if (visible) {
          this.userinfoFn();
          this.search();
          console.log('packageSettlementBol', visible);
        }
      });
    },
    consumptionSettlementBol (visible) {
      this.$nextTick(async () => {
        if (visible) {
          this.userinfoFn();
          this.search();
          console.log('consumptionSettlementBol', visible);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.fourPalaceGrid {
  display: flex;
  flex-wrap: wrap;
  .singlePalaceGrid {
    flex: 50%; /*0 不放大  0 不收缩  子项大小为父容器25%*/

    height: 93px;

    align-items: center;
    box-sizing: border-box;

    border: 1px solid #f5f6fb;
    .accumulateNum {
      height: 62px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .Num {
        color: #1e6ceb;
        font-size: 20px;
      }
    }
  }
  .icon {
    width: 32px;
    height: 32px;
  }
}

:deep(.el-card__body) {
  padding: 0;
}
.accumulatedSitesBg {
  //   background-image: url('/src/assets/images/Rectangle 2056.png');
  background-repeat: no-repeat;
  background-size: cover;

  .padding30 {
    padding: 17px 17px 0 20px;
    .sitesNum {
      color: #fff;
      font-size: 30px;
      font-weight: 400;
    }
    .accumulatedSites {
      color: #fff;
    }
  }
}
.padding17 {
  padding: 17px 17px 0 20px;
}
.workplace-goal {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  .workplace-goal-body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    margin: -48px 0 0 -90px;
    text-align: center;
  }
}
</style>
